<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<!-- 
        生命周期：
            1.又名：生命周期回调函数、生命周期函数、生命周期钩子
            2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数
            3.生命周期函数的名字不可更变，但函数的具体内容是程序员根据需求编写的
            4.生命周期函数中this指向的是vm 或 组件实例对象
 -->
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2 v-if="a">你好啊</h2>
        <!-- 这里其实是opacity:opacity  就是属性：属性值  但是这里有一个es6语法 如果属性名和属性值同名可以简写 -->
        <h2 :style="{opacity}">欢迎学习Vue</h2>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;  //阻止Vue在启动时生成 生产提示

        //创建Vue实例
        new Vue({
            el: '#root',
            data: {
                a: false,
                opacity: 1
            },
            methods: {

            },
            mounted(){
                console.log('mounted',this)  //这里的this Vue已经维护好了 指向Vue
                setInterval(()=>{
                    this.opacity -= 0.01
                    if(this.opacity <=0) this.opacity =1
                },16)
            },

        })

        //通过外部的定时器实现
        // setInterval(() => {
        //     this.opacity -= 0.01
        //     if (this.opacity <= 0) this.opacity = 1
        // }, 16)
    </script>
</body>

</html>